To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
We look at how to customize table contents by using the b-table-simple component.
Simple Tables
The b-table-simple component lets us create a table as we do in regular HTML.
Therefore, we have full control of each cell.
We can add the striped , bordered , borderless , outlined , small , hover , dark , fixed , responsive , and sticky-header props to style the table the way we like.
For example, we can create one by writing:
<template>
<div id="app">
<b-table-simple responsive>
<b-thead>
<b-tr>
<b-th>id</b-th>
<b-th>first</b-th>
<b-th>last</b-th>
</b-tr>
</b-thead>
<b-tbody>
<b-tr v-for="i of items" :key="i.id">
<b-td>{{i.id}}</b-td>
<b-td>{{i.firstName}}</b-td>
<b-td>{{i.lastName}}</b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We have the b-table-simple component.
Inside it, we have the b-thead component to add the table header.
b-tr add the rows.
b-th add the header cells.
b-tbody adds the table body.
And b-td adds the body cells.
Simple tables can be stacked like regular tables.
For example, we can write:
<template>
<div id="app">
<b-table-simple stacked>
<b-tbody>
<b-tr v-for="i of items" :key="i.id">
<b-td stacked-heading="id">{{i.id}}</b-td>
<b-td stacked-heading="first">{{i.firstName}}</b-td>
<b-td stacked-heading="last">{{i.lastName}}</b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We have the stacked prop with the stacked-heading on each table cell to specify the field name to display.
Simple Tables and Sticky Columns
We can make a column sticky with the sticky-column prop.
For instance, we can write:
<template>
<div id="app">
<b-table-simple responsive>
<b-thead>
<b-tr>
<b-th sticky-column>id</b-th>
<b-th>first</b-th>
<b-th>last</b-th>
</b-tr>
</b-thead>
<b-tbody>
<b-tr v-for="i of items" :key="i.id">
<b-td sticky-column>{{i.id}}</b-td>
<b-td>{{i.firstName}}</b-td>
<b-td>{{i.lastName}}</b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: [
{ id: 1, firstName: "alex", lastName: "green" },
{
id: 2,
firstName: "may",
lastName: "smith"
},
{ id: 3, firstName: "james", lastName: "jones" }
]
};
}
};
</script>
We just put the sticky-column prop on the column cells to make the column sticky.
Helper Components
Helper components are added to tables to let us render things in a custom manner.
b-table-simple can include b-tbody , b-thead , b-tfoot , b-te , b-td , and b-th components.
b-table can only include b-tr , b-td , and b-th components.
Conclusion
We can use the b-table-simple component to let us create tables in a more flexible manner.
Also, we can add sticky columns into our table
They can be also be shown as a stacked table.
